<html>

<head>
  <script type="module">
    import * as THREE from 'three';
    import { MindARThree } from "../../src/face-target/three.js";
    const mindarThree = new MindARThree({
      container: document.querySelector("#container"),
    });
    const { renderer, scene, camera } = mindarThree;

    const light = new THREE.HemisphereLight(0xffffff, 0xbbbbff, 1);
    scene.add(light);

    const faceMesh = mindarThree.addFaceMesh();
    const texture = new THREE.TextureLoader().load('./assets/canonical_face_model_uv_visualization.png');
    faceMesh.material.map = texture;
    faceMesh.material.transparent = true;
    faceMesh.material.needsUpdate = true;
    scene.add(faceMesh);

    const start = async () => {
      await mindarThree.start();
      renderer.setAnimationLoop(() => {
        renderer.render(scene, camera);
      });
    }
    start();
  </script>

  <style>
    body {
      margin: 0;
    }

    #container {
      width: 100vw;
      height: 100vh;
      position: relative;
      overflow: hidden;
    }
  </style>
</head>

<body>
  <div id="container">
  </div>
</body>

</html>
